<template>
<div class="tabbar">
    <div class="tabbar_item" v-for="e,i in tabbarList" :key="i" v-bind:class="{'tabbar_item--active' : i == index}">
        
    <RouterLink :to="e.to" @click="oni(i)">
        <span class="iconfont" v-html="e.icon"></span>
        <span class="tabbar_title">{{ e.text }}</span>
    </RouterLink>
    </div>
</div>
</template>
<script setup>
import {ref} from 'vue'
const tabbarList = [
    {icon: '&#xe651;', text: '首页', to: {path: '/home'}},
    {icon: '&#xe690;', text: '购物车', to: {path: '/cart'}},
    {icon: '&#xe655;', text: '订单', to: {path: '/order'}},
    {icon: '&#xe60b;', text: '我的', to: {path: '/my'}},
]
let  index=ref(0)
const oni = (i)=>{
index.value=i
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';

.tabbar {
    width: 100%;
    height: .49rem;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: .01rem solid $content_bgColor;
    display: flex;

    // .tabbar_item
    &_item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: $content_fontcolor;
            
        }
        //活动样式
        &--active {
            a {
                color: #1FA4FC;
            }
        }
    }
}
</style>

